/* eslint-disable @typescript-eslint/no-var-requires */
import React, { useState, useEffect } from 'react';
import styles from './index.module.less';
import { Link } from 'react-router-dom';
import offlineDocImg from '@/assets/images/nav-children-official-doc-create.png';
import onlineDocImg from '@/assets/images/nav-children-online-doc.png';
import classnames from 'classnames';
import { applyType } from '@/constants';
import { getMyProcessModel } from '@/services/approval';
import { useSelector } from 'react-redux';
import history from '@/utils/history';

const DocCreateTemplate: React.FC<any> = () => {
  const [list, setList] = useState<any[]>([]);

  const { userInfo, userMenu } = useSelector((state: any) => ({
    userInfo: state.common.userInfo?.user,
    userMenu: state.common.userMenu,
  }));

  useEffect(() => {
    getOnlineDocList();
  }, []);

  const getOnlineDocList = async () => {
    const res = await getMyProcessModel();
    setList(res.data || []);
  };

  const getSkipUrl = (info: any) => {
    history.push({
      pathname: '/apply',
      query: {
        applyType: applyType.ONLINE_DOCUMENT_APPLY,
        innerProcDefId: info.innerProcDefId,
        title: `${userInfo.userName}的${info.procModelName}`,
      },
    });
  };

  const checkOfficialDocOfflineAuth = () => {
    let hasAuth = false;
    userMenu.forEach((item: any) => {
      if (item.code === 'official-doc') {
        // code='official-doc'对应公文菜单
        item?.children?.forEach((subItem: any) => {
          if (subItem.code === 'official-add') {
            // xode='official-doc-create'对应线下公文创建
            hasAuth = true;
          }
        });
      }
    });
    return hasAuth;
  };

  return (
    <div className={styles.wrap}>
      {checkOfficialDocOfflineAuth() && (
        <React.Fragment>
          <div className={styles.categoryTitle}>线下公文</div>
          <Link className={styles.card} to='/official-doc/create'>
            <img className={styles.icon} src={offlineDocImg} />
            <div className={styles.content}>
              <span className={styles.contentTitle}>线下公文录入</span>
              {/* <span className={styles.contentDesc}>可录入线下已开会且生效的公文</span> */}
            </div>
            <div className={styles.next}>
              <i className={classnames('iconfont icon', styles['nexticon'])}>
                &#xe6ed;
              </i>
            </div>
          </Link>
        </React.Fragment>
      )}
      {list?.length ? (
        <React.Fragment>
          <div className={styles.categoryTitle}>线上公文</div>
          {list.map((item, index) => (
            <a
              className={styles.card}
              key={index}
              onClick={() => getSkipUrl(item)}
            >
              <img className={styles.icon} src={item.iconUrl || onlineDocImg} />
              <div className={styles.content}>
                <span className={styles.contentTitle}>
                  {item.procModelName}
                </span>
                <span className={styles.contentDesc}>{item.procRemark}</span>
              </div>
              <div className={styles.next}>
                <i className={classnames('iconfont icon', styles['nexticon'])}>
                  &#xe6ed;
                </i>
              </div>
            </a>
          ))}
        </React.Fragment>
      ) : (
        ''
      )}
    </div>
  );
};

export default DocCreateTemplate;
